<template>
  <div class='g-content-wrapper'>
  <header-top>
      <tab-bar  class="header-tab" :tab-bar="headerTabBar"
        :on-selected="topSelected" specialWid="true"></tab-bar>
  </header-top>

  <div class="g-content">
    <state></state>

    <tab-line class="tab-margin" :tab-line="menuTabLine" :on-selected="tabLineSelected"></tab-line>

    <tab-bar v-show = "tabLineIndex == 0" :on-selected="realTimeSelected"></tab-bar>

    <trend-chart v-if = "tabLineIndex == 0"
      :chart-data = "trendChartData" :legendText="legendText">
    </trend-chart>

    <tab-bar v-show = "tabLineIndex == 1" :on-selected="nextDaySelected" :tab-bar="nextDayTabBar"></tab-bar>
    <tommorow-chart v-if = "tabLineIndex == 1" :chart-data="tommorowChartData" :category="nextDayIndex"></tommorow-chart>

    <div class="interval" v-show="!tabLineIndex"></div><!--间隔-->

    <stock-distri :options="stkDistriOpts" :data="stkDistriData"  v-show="!tabLineIndex"></stock-distri>

    <div class="interval"></div><!--间隔-->

    <div class='comment'>
      <h1 class='comment-title'>涨跌</h1>
      <p>涨跌停<br>
        KDJ，其综合动量观念、强弱指标及平均线的有点，早年应用在期货投资方面，功能颇为显著，目前为股市中常备使用的指标之一。<br>
        涨跌幅大于5%<br>
        买卖原则<br>
        1、K线由右边向下交叉D值做卖，K线由右边向下交叉D值做买。<br>
        2、高档连续二次向下交叉确认跌势，低档连续二次向上交叉确认涨势。<br>
        3、D值<20%超卖，D值>80%超买，J>100%超买，J<10%超卖。<br>
        4、KD值于50%左右徘徊或交叉时，无意义。<br>
        5、投机性太强的个股不适用。<br>
        6、可观察KD值同股价的背离，以确定高低点.
      </p>
    </div>
  </div>
  </div>
</template>

<script>

import headerTop from '@/pages/common/HeaderTop'
import state from '@/pages/common/State'
import tabBar from '@/pages/common/TabBar'
import tabLine from '@/pages/common/TabLine'
import stockDistri from '@/pages/common/StockDistri'

import trendChart from './children/TrendChart'
import tommorowChart from './children/TommorowChart'
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import { Loop } from '@/common/polling'

export default {
  name: 'current-change',
  components: {
    headerTop,
    state,
    tabBar,
    tabLine,
    stockDistri,
    trendChart,
    tommorowChart
  },
  data () {
    return {
      hdTabBarIndex: 0,
      tabLineIndex: 0,
      realTimeIndex: 0,
      nextDayIndex: 0,
      loading: true,
      headerTabBar: [{
        name: '涨跌停'
      }, {
        name: '涨跌幅大于5%'
      }],

      menuTabLine: [{
        name: '当前实时走势'
      }, {
        name: '涨停股次日表现'
      }],

      nextDayTabBar: [
        {name: '1个交易日'},
        {name: '5个交易日'}
      ],

      trendChartData: null,
      tommorowChartData: null,

      stkDistriData: {}
    }
  },
  computed: {
    stkDistriOpts () {
      return {
        title: this.hdTabBarIndex ? '涨幅大于5%股票分布' : '涨跌停股票分布',
        positiveText: this.hdTabBarIndex ? '涨幅大于5%股票数量' : '涨停股票数量',
        negativeText: this.hdTabBarIndex ? '跌幅大于5%股票数量' : '跌停股票数量'
      }
    },
    legendText () {
      return {
        redText: this.hdTabBarIndex ? '涨幅大于5%' : '涨停',
        greenText: this.hdTabBarIndex ? '跌幅大于5%' : '跌停',
        blueText: ['上证指数', '上证指数', '深证指数', '创业板指数'][this.realTimeIndex]
      }
    }
  },
  methods: {
    // 顶部tabBar选项卡
    topSelected (index) {
      if (index == this.hdTabBarIndex) return;
      this.menuTabLine[1].name = index ? '涨幅大于5%股次日表现' : '涨停股次日表现';

      this.hdTabBarIndex = index;
      this.$store.dispatch('showLoading');
      this.fetchData();
    },
    // 顶部tabLine选项卡
    tabLineSelected (index) {
      if (index == this.tabLineIndex) return;
      this.tabLineIndex = index;
      this.$store.dispatch('showLoading');
      this.fetchData();
    },
    // 实时走势tabBar选项卡(子组件触发)
    realTimeSelected(index) {
      if (index == this.realTimeIndex) return;
      this.realTimeIndex = index;

      this.$store.dispatch('showLoading');
      this.fetchData();
    },
    // 次日、五日表现 tabBar(子组件触发)
    nextDaySelected(index) {
      if (index == this.nextDayIndex) return;
      this.nextDayIndex = index;

      this.$store.dispatch('showLoading');
      this.fetchData();
    },

    async fetchTodayData () {
      try {
        const [index, chart] = await Promise
          .all([
            remoteDAO.getIndexMinList(['sh', 'sh', 'sz', 'cyb'][this.realTimeIndex]),
            remoteDAO.invoke(
              constant.InterfaceEnum.GET_C_TRENDS,
              {
                type: this.hdTabBarIndex,
                market: this.realTimeIndex
              }
            )
          ]);

        this.trendChartData = {
          ...chart,
          indexData: index.data
        };
      } catch (err) {
        this.$store.dispatch('showError')
      }
    },

    async fetchModData () {
      const res = await remoteDAO.invoke(
        constant.InterfaceEnum.GET_C_MO_TRENDS,
        { type: this.hdTabBarIndex }
      );

      this.stkDistriData = res;
    },

    async fetchFutureData () {
      try {
        const [index, chart] = await Promise
          .all([
            !this.nextDayIndex ? remoteDAO.getIndexMinList('sh')
              : remoteDAO.invoke(constant.InterfaceEnum.GET_DAYS_INDEX, {
                type: 1,
                pType: 5 // 获取5天的收盘指数
              }),
            remoteDAO.invoke(
              constant.InterfaceEnum.GET_FUTURE_PF,
              {
                type: this.hdTabBarIndex,
                pType: this.nextDayIndex
              }
            )
          ])

        this.tommorowChartData = {
          ...chart,
          indexData: this.nextDayIndex ? index.TableInfo : index.data
        };
      } catch (err) {
        this.$store.dispatch('showError')
      }
    },
    fetchFutureIndex() {
      !this.nextDayIndex ? remoteDAO.getIndexMinList('sh')
        : remoteDAO.invoke(constant.InterfaceEnum.GET_DAYS_INDEX, {
          type: 1,
          pType: 5 // 获取5天的收盘指数
        })
    },
    fetchData () {
      if (this.tabLineIndex) {
        this.fetchFutureData();
      } else {
        this.fetchTodayData();
        this.fetchModData();
      }
    },

    transitionDone () {
      Loop.getInstance().register(this.fetchData);
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../../assets/css/common.less';
.header-tab {
  margin-top: 0.07rem;
}
</style>
